<template>
  <a-layout class="index-view">
    <a-layout-header>
      <a-button @click="resetHiddenSln">
        还原隐藏方案
      </a-button>
      <a-button
        class="logout"
        style="float: right;top: 15px;"
        @click="logout"
      >
        退出登录
      </a-button>
    </a-layout-header>
    <a-layout-content>
      <a-collapse v-model:activeKey="activeKeys">
        <template v-for="(sln, index) in slns">
          <a-collapse-panel
            v-if="isShowSln(sln.id)"
            :key="index"
            :header="sln.text"
          >
            <template #extra>
              <a-button @click="hiddenSln(sln.id)">
                隐藏
              </a-button>
            </template>
            <a-row>
              <a-col
                v-for="(item, i) in sln.items"
                :key="i"
                :span="6"
              >
                <a-card>
                  <template #actions>
                    <a-button @click="openManage(item)">
                      管理端
                    </a-button>
                    <a-button @click="openDesign(item)">
                      设计端
                    </a-button>
                  </template>
                  <a-card-meta
                    :title="`${item.logicname || item.psdevslnsysname} - ${item.codename}`"
                    :description="item.memo"
                  />
                </a-card>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </template>
      </a-collapse>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Copyright @2022 ibizmodeling.cn
    </a-layout-footer>
  </a-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ipc } from '../service';
import { Environment } from '../environment';

type Item = {
  logicname: string;
  psdevslnid: string;
  psdevslnname: string;
  psdevslnsysname: string;
  templengine: string;
  psdevslnsysid: string;
  codename: string;
  memo: string;
};

const activeKeys = ref<string[]>([]);

// 所有应用中心
const slns = ref<{ id: string, text: string, items: Item[] }[]>([]);

const hiddenSlnArrStr = localStorage.getItem('hiddenSlnArr') || '[]';

const hiddenSlnArr = ref<string[]>(JSON.parse(hiddenSlnArrStr));

function isShowSln(id: string) {
  return !hiddenSlnArr.value.includes(id);
}

function hiddenSln(id: string) {
  hiddenSlnArr.value.push(id);
  localStorage.setItem('hiddenSlnArr', JSON.stringify(hiddenSlnArr.value));
}

function resetHiddenSln() {
  hiddenSlnArr.value = [];
  localStorage.setItem('hiddenSlnArr', JSON.stringify(hiddenSlnArr.value));
}

async function load(): Promise<void> {
  try {
    const f = await fetch(`${Environment.BaseUrl}/psdevslnsys/fetchcuruser`);
    const data: Item[] = await f.json();
    const maps: Map<string, Item[]> = new Map();
    data.forEach(item => {
      if (item.templengine === 'V2') {
        if (!maps.has(item.psdevslnid)) {
          maps.set(item.psdevslnid, []);
        }
        const sysArr = maps.get(item.psdevslnid)!;
        sysArr.push(item);
      }
    });
    maps.forEach((items, key) => {
      slns.value.push({
        id: key,
        text: items[0].psdevslnname,
        items,
      });
    });
  } catch (error) {
    console.log(error);
  }
}

/**
 * 打开管理端工具
 */
function openManage(item: Item): void {
  ipc.openMosDynamic(item.psdevslnsysid, true);
}

/**
 * 打开设计端工具
 */
function openDesign(item: Item): void {
  ipc.openMosDynamic(item.psdevslnsysid);
}

function logout(): void{
  ipc.logout();
}

load();
</script>
<style lang="scss">
.index-view {
  height: 100%;
  width: 100%;
}

.ant-layout-content {
  padding: 16px;
  overflow-y: auto;
}

.ant-card-body {
  min-height: 100px;
}

.ant-col {
  padding: 8px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.system-container {
  cursor: pointer;
  padding: 16px;
}
</style>
